<template>
    <el-card>
         <!-- 面包屑 -->
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/hom2e' }"> <i class="el-icon-house"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 内容区域 -->
         <!-- 主体内容 -->
        <!-- 筛选区域 -->
        <div class="filter-bar">
            <!-- 筛选表单 -->
            <div class="l-form">
            </div>
            <!-- 右侧按钮 -->
            <div class="r-btn">
                <el-button type="primary" size="small" icon="el-icon-plus">增加</el-button>
            </div>
        </div>
        <!-- 表格区域 -->
        <div class="table-box">
            <el-table :data="rolelist" border  >
                <el-table-column label="" type="expand">
                   <!-- 折叠的信息 -->
                    <template slot-scope="scope">
                        <el-row class="line-row" v-for="item in scope.row.children" :key="item.id">
                            <el-col :span="5" >
                                <el-tag>{{item.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <el-col :span="19">
                                <el-row class="line-row" v-for="value in item.children" :key="value.id">
                                    <el-col :span="8">
                                        <el-tag type="success">{{value.authName}}</el-tag>
                                         <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="16">
                                        <el-tag 
                                            v-for="val in value.children" 
                                            type="warning" 
                                            :key="val.id" 
                                            closable 
                                            @close="delSingleRight(scope.row,val.id)" 
                                        >{{val.authName}}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="序号" width="130" align="center" type="index"></el-table-column>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>
                <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button 
                            type="success" 
                            size="small" 
                            circle 
                            icon="el-icon-edit" 
                        ></el-button>
                        <el-button 
                            type="danger" 
                            size="small"  
                            circle 
                            icon="el-icon-delete"
                        ></el-button>
                        <el-button 
                            type="warning" 
                            size="small"  
                            circle 
                            icon="el-icon-setting"
                            @click="roleAuthSet(scope.row)"
                        ></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 角色授权弹框 -->
        <el-dialog
            title="角色授权"
            :visible.sync="roleRightShow"
            width="30%"
            @close="closeAuthDialog"
            >
            <!-- 树形控件 -->
            <!-- v-if的原因是因为，如果不让树重新生成，那么在树上面操作的节点状态会被遗留！ -->
            <el-tree 
                ref="tree" 
                v-if="roleRightShow"
                :data="rightlist" 
                :props="{label:'authName',children:'children'}"
                node-key="id"
                show-checkbox
                default-expand-all
                :default-checked-keys="defCheck"
            ></el-tree>
            
            <span slot="footer">
                <el-button @click="roleRightShow = false">取消</el-button>
                <el-button type="primary" @click="roleAuthSubmit">确定</el-button>
            </span>
        </el-dialog>
        

    </el-card>
</template>

<script>
    export default {
        data() {
            return {
                rolelist: [],  // 角色信息
                roleRightShow:false,  // 角色授权弹框
                rightlist:[],  // 所有权限信息
                defCheck:[],  //  默认要回显的角色信息（三级ID）
                roleId:null // 要修改角色权限的 角色ID
            }
        },
        created () {
            this.getRoleList()  // 获取所有角色
            this.getRightList() // 获取所有权限
        },
        methods: {
            // 获取角色列表
            async getRoleList() {
                // 发送请求
                let { data:res } = await this.$axios.get('roles')
                // 错误处理
                if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
                // 赋值数据
                this.rolelist = res.data
            },
            // 获取所有权限信息
             async getRightList() {
                // 发送请求
                let { data:res } = await this.$axios.get('rights/tree')
                // 错误处理
                if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
                // 成功赋值
                this.rightlist = res.data
            },
            // 删除角色的单个权限
            async delSingleRight(row,rightid){
                try {
                    // 确认框
                    await this.$confirm('确认删除该权限吗？','提示',{
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    // 删除操作
                    let { data:res } = await this.$axios.delete(`roles/${row.id}/rights/${rightid}`)
                    if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
                    // row表示这一行的数据信息， row.children 表示该角色的所有权限信息， 删除成功之后
                    // 后台直接返回当前角色的最新所有权限信息
                    row.children = res.data
                } catch (error) {
                    this.$message.info('取消删除')
                }
            },
            // 角色授权
            roleAuthSet(row){
                // row是这一行的数据信息！我们要取出这个角色的最底层的权限ID，放入defCheck
                this.roleRightShow = true
                this.roleId = row.id
                this.getLeafKeys(row,this.defCheck)
            },
            // 遍历递归获取所有最底层ID
            getLeafKeys(node, arr) {
                //该函数会获取到当前角色的所有三级权限id并添加到defCheck中
                //如果当前节点不包含children属性，则表示node为三级权限
                if (!node.children) {
                    return arr.push(node.id)
                }
                //递归调用
                node.children.forEach(item => this.getLeafKeys(item, arr))
            },
            // 角色授权提交事件
            async roleAuthSubmit(){
                // 现在选中的权限ID列表、 角色ID
                let authlist =[
                    ...this.$refs.tree.getCheckedKeys(),
                    ...this.$refs.tree.getHalfCheckedKeys()
                ]
                // 发送请求
                let { data:res } = await this.$axios.post(`roles/${this.roleId}/rights`,{
                    rids:authlist.join(',')
                })
                if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
                // 提示一下
                this.$message.success('授权成功')
                // 拉取最新列表
                this.getRoleList()
                // 关闭弹框
                this.roleRightShow = false
            },
            // 关闭授权弹框
            closeAuthDialog(){
                // 防止出现上一次的三级ID 都混入在一起！
                this.defCheck = []
            }
        },
    }
</script>

<style lang="less" scoped>
.line-row{
    border-bottom: 1px solid #eee;
    padding: 10px 0;
      display: flex;
    align-items:center;
}
.line-row:last-child{
    border: none;
}
.line-row .el-tag{
    margin-right: 10px;
    margin-bottom: 10px;
}
</style>